blob: f42f5c97bc602175e5da6c558078a38a4f39d693 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
---
import { getCollection, getEntry } from 'astro:content';
import StandardLayout from '../../layouts/StandardLayout.astro';
// Define the props type
export async function getStaticPaths() {
const blogEntries = await getCollection('blog');
return blogEntries.map(entry => ({
params: { slug: entry.slug },
props: { entry },
}));
}
// Get the blog post data
const { entry } = Astro.props;
const { Content } = await entry.render();
// Format the publication date
const formattedDate = new Date(entry.data.pubDate).toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
---
<StandardLayout title={entry.data.title} description={entry.data.description}>
<article class="max-w-3xl mx-auto">
<div class="mb-8">
<a href="/blog" class="text-blue-600 hover:text-blue-800 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M9.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L7.414 9H15a1 1 0 110 2H7.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" />
</svg>
Back to Blog
</a>
</div>
{entry.data.image && (
<img
src={entry.data.image}
alt={entry.data.title}
class="w-full h-64 md:h-96 object-cover rounded-lg shadow-md mb-8"
/>
)}
<h1 class="text-4xl font-bold text-gray-900 mb-4">{entry.data.title}</h1>
<div class="flex items-center text-gray-600 mb-8">
<span>By {entry.data.author}</span>
<span class="mx-2">•</span>
<time datetime={entry.data.pubDate.toISOString()}>{formattedDate}</time>
</div>
{entry.data.tags && entry.data.tags.length > 0 && (
<div class="flex flex-wrap gap-2 mb-8">
{entry.data.tags.map(tag => (
<span class="bg-gray-100 text-gray-800 text-sm font-medium px-3 py-1 rounded-full">
{tag}
</span>
))}
</div>
)}
<div class="prose prose-lg max-w-none">
<Content />
</div>
</article>
</StandardLayout>
|
